<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //    一、一般思路，较繁琐
        var add = document.getElementById("addBtn");
        var tbelm = document.querySelector("tbody");
        add.onclick = function () {
            var userelm = document.getElementById("username");
        var ageelm = document.getElementById("age");
        var sexelm = document.getElementById("gender");
                var trelm = document.createElement("tr");
                trelm.innerHTML = `<td>${userelm.value}</td><td>${ageelm.value}</td><td>${sexelm.value}</td><td class="del">删除</td>`
                
                tbelm.appendChild(trelm);
                trelm.querySelector(".del").onclick =function(){       
                    trelm.remove();
            }
        }


        // 以上不是最优方法，比如排序时需要获取dom存入数组，再按照年龄排序，再输出到dom，比较繁琐
        // 最好将重点放在对虚拟数据处理上，先将输入存入对象数组，然后将对象数组根据数据生成对应的dom结构

        //    二、数据驱动 ：关注点 放在数据上 ，简化dom的操作
    // 优先操作数据 ，然后再操作dom 

    var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");

        var addBtnEle = document.querySelector("#addBtn");
        var tbody = document.querySelector("tbody");

        // 获取排序的按钮 
        var sortBtnEle = document.querySelector("#sortBtn");

        var arr = [];  // 是存放数据的地方；
        /* 
            arr = [{name:"zhangsan",age:20},{},{}]
        
        
        */
    //    点击添加数据
        addBtnEle.onclick = function(){
            var username = usernameEle.value;
            var age = ageEle.value;
            var gender = genderEle.value;
            var obj = {
                username:username,
                age:age,
                gender:gender
            }
            // console.log(obj);
            arr.push(obj);
            console.log(arr);
            renderDom(arr);
        }
// 点击排序 
sortBtnEle.onclick = function(){
    // 排列 数据
    // console.log(arr);
    arr.sort(function(a,b){
        return a.age - b.age;
    })
    console.log(arr);
    renderDom(arr);

}

        // var arr = [{
        //     username:"张三",
        //     age:20,
        //     gender:"男"
        // },{
        //     username:"张三2",
        //     age:23,
        //     gender:"男"
        // },{
        //     username:"张三3",
        //     age:21,
        //     gender:"男"
        // },{
        //     username:"张三3",
        //     age:21,
        //     gender:"男"
        // }]
        // renderDom(arr);
        // 会根据数据生成对应的dom结构；
        function renderDom(data){
            // 清空 tobody里的内容 ；
            tbody.innerHTML = "";
            data.forEach(function(item,key){
                var trEle = document.createElement("tr");
                trEle.innerHTML = `<td>${item.username}</td>
                                    <td>${item.age}</td>
                                    <td>${item.gender}</td>
                                    <td class="del">删除</td>`;
            trEle.querySelector(".del").onclick = function(){
                // this.parentNode.remove();  // 删除是tr结构 数据没有任何变化
                // 删除数据 然后 在渲染视图 ；
                console.log(key)
                data.splice(key,1);
                console.log(data);
                renderDom(data);
            }
            tbody.appendChild(trEle);
            })
        }
    </script>
</body>
</html>